<template>
    <div class="header">
        <router-link class="header-abs"
                     to="/"
                     tag="div"
                     v-if="showAbs"
        >
            <i class="el-icon-arrow-left header-abs-back"></i>
        </router-link>
        <div class="header-fixed"
             v-else-if="!showAbs"
             :style="opacityStyle"
        >
            <router-link class="header-fixed-back"
                         to="/"
                         tag="div"
            >
                <i class="el-icon-arrow-left "></i>
        </router-link>
            景点详情
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      showAbs: true,
      opacityStyle: {
        opacity: 0
      }
    }
  },
  methods: {
    handleScroll () {
      const top = document.documentElement.scrollTop
      if (top > 60) {
        let opacity = top / 140
        opacity = opacity > 1 ? 1 : opacity
        this.opacityStyle = {
          opacity
        }
        this.showAbs = false
      } else {
        this.showAbs = true
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.handleScroll)
  },
  deactivated () {
    window.removeEventListener('sceoll', this.handleScroll)
  }
}
</script>

<style scoped lang='stylus'>
    @import '~@/assets/styles/varibles.styl';
    .header {
        .header-abs {
            position : absolute
            display : flex
            justify-content : center
            align-items : center
            left : 0.2rem
            top : 0.2rem
            width : 0.8rem
            height : 0.8rem
            border-radius : 0.4rem
            background : rgba(0, 0, 0, 0.6)
            line-height : 0.8rem
            .header-abs-back {
                color : #fff
                font-size : .5rem
                font-weight : bolder
            }
        }
    }
    .header-fixed {
        position : fixed
        z-index : 2
        top : 0
        left : 0
        right : 0
        overflow : hidden
        text-align : center
        color : #fff
        height : $headerHeight
        line-height : $headerHeight
        background : $bgColor
        font-size : 0.32rem
        .header-fixed-back {
            position : absolute
            width : 0.64rem
            top : 0
            left : 0
            text-align : center
            font-size : 0.5rem
            color : #fff
        }
    }
</style>
